<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="费用项" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<!-- 自定义费用项目列表 -->
						<view v-if="customCostList.length > 0">
							<view class="costItem flex-row-center-sb" v-for="(item, index) in customCostList"
								:key="index">
								<text style="color: #333333;font-size: 28rpx;">{{item.deductionsFor}}</text>
								<view class="flex-row-center">
									<text style="color: #333333;font-size: 28rpx;">¥{{item.deductionsAmount||0}}</text>
									<view style="margin: 0 26rpx;" @click="addCustomCost(2, index, item)">
										<u-icon name="edit-pen" color="#2879FF" size="24"></u-icon>
									</view>
									<view @click="deleteCostItem(index)" v-if="item.source==1">
										<u-icon name="trash" color="#2879FF" size="24"></u-icon>
									</view>
								</view>
							</view>
						</view>

						<view class="flex-xy-center" @click="addCustomCost(1)">
							<view class="flex-row-center addCost">
								<u-icon name="plus-circle" color="#fff"></u-icon>
								<text style="color: #fff;font-size: 26rpx;margin-left: 20rpx;">添加收费项</text>
							</view>
						</view>
					</uni-forms>
				</view>
			</uni-section>
			<uni-section title="车损费用明细" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="车损合计">
							<view class="flex-row-center-sb" style="position: relative;top: 20rpx;">
								<text>{{vehicleDamageTotal}}元</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="结算方式" required>
							<uni-data-checkbox v-model="formData.settlementMethod" :localdata="settlementMethods" />
						</uni-forms-item>
						<!-- 选择押金抵扣 -->
						<block v-if="formData.settlementMethod == 1">
							<uni-table ref="table" :loading="loading" border stripe>
								<uni-tr>
									<uni-th width="100" align="center"><text style="color: #2879FF;">支付方式</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">已付金额</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">抵扣金额</text>
									</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in depositList" :key="index">

									<uni-td align="center">{{ item.paymentMethod }}</uni-td>
									<uni-td align="center">{{ item.paidAmount }}</uni-td>
									<uni-td align="center" v-if="item.type==3">{{ supplementary }}</uni-td>
									<uni-td align="center" v-else>
										<uni-easyinput v-model="item.deductionsAmount" :clearable="false" type="number"
											@input="changeDeductionsAmount(item, $event)">
											{{item.deductionsAmount}}</uni-easyinput>
									</uni-td>
								</uni-tr>
							</uni-table>
						</block>

					</uni-forms>
				</view>
			</uni-section>
		</view>

		<button type="info" class="sub-btn" @click="vehicleDamageSettlement">车损结算</button>

		<u-popup :show="showEditCost" mode="bottom" @close="showEditCost = false" closeable round="20">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx;">
				<view style="margin-bottom: 30rpx;">{{popTitleType == 1 ? '新增' : '编辑'}}费用项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.deductionsFor" v-if="customCost.source==1"
								placeholder="请输入收费项名称"></u--input>
							<text v-else style="line-height: 36px;">{{customCost.deductionsFor}}</text>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.deductionsAmount" @input="check" type="digit"
								placeholder="请输入费用">
							</u--input>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	export default {

		data() {
			return {
				showEditCost: false,
				popTitleType: 1,
				currentEditCostIndex: -1,
				customCostList: [],
				depositList: [],
				customCost: {
					chargeItemsType: 1,
					deductionsFor: '',
					deductionsAmount: '',
					deductionsWay: '1'
				},
				settlementMethods: [{
					value: 2,
					text: '单独收费'
				}],
				formData: {
					orderNo: null,
					settlementMethod: 2,
				}

			}
		},
		computed: {
			// 计算车损总和
			vehicleDamageTotal() {
				let total = 0
				this.customCostList.forEach(item => {
					total += Number(item.deductionsAmount)
				})
				return total.toFixed(2)
			},
			// 计算抵扣费用
			deduction() {
				let total = 0
				this.depositList.forEach(item => {
					if (item.type < 3) {
						total += Number(item.deductionsAmount)
					}
				})
				return total.toFixed(2)
			},
			// 计算补缴费用
			supplementary() {
				let total = Number(this.vehicleDamageTotal - this.deduction).toFixed(2)
				this.depositList.forEach(item => {
					if (item.type == 3) {
						item.deductionsAmount = total
					}
				})
				return total < 0 ? 0 : total
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.formData.orderNo = this.order.orderNo;
			this.depositRefundDetail();
		},
		methods: {
			changeDeductionsAmount(item, e) {
				let input = Number(e);
				let paidAmount = Number(item.paidAmount);
				if (input > paidAmount) {
					item.deductionsAmount = paidAmount;
				}
			},
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.customCost.deductionsAmount = e;
				})
			},
			depositRefundDetail() {
				orderApi.depositRefundDetail(this.formData.orderNo).then(response => {
					this.customCostList = response.data.settlementList || [];
					this.depositList = response.data.depositList || [];
					if (this.depositList.length > 1) {
						this.settlementMethods.push({
							value: 1,
							text: '押金抵扣'
						})

					}
				})
			},
			// 添加或者编辑自定义费用项
			addCustomCost(type, index, info) {
				this.popTitleType = type;
				if (type == 1) { //新增
					this.customCost = {
						source: 1
					};
				} else { //编辑
					this.customCost = info;
					this.currentEditCostIndex = index;
				}
				this.showEditCost = true;
			},
			deleteCostItem(index) {
				this.customCostList.splice(index, 1);
			},
			//确定提交费用项
			commitCost() {
				if (this.$u.test.isEmpty(this.customCost.deductionsFor)) {
					uni.$u.toast('费用名称不能为空');
					return
				} else if (this.$u.test.isEmpty(this.customCost.deductionsAmount)) {
					uni.$u.toast('费用不能为空');
					return
				} else if (!this.$u.test.number(this.customCost.deductionsAmount)) {
					uni.$u.toast('请输入正确金额');
					return
				} else {
					if (this.popTitleType == 1) { //新增
						this.customCost.source = 1
						this.customCostList.push(this.customCost);
					} else { //编辑
						this.customCostList[this.currentEditCostIndex].source = this.customCost.source;
						this.customCostList[this.currentEditCostIndex].deductionsFor = this.customCost.deductionsFor;
						this.customCostList[this.currentEditCostIndex].deductionsAmount = this.customCost.deductionsAmount;
					}
					this.showEditCost = false;
				}
			},
			vehicleDamageSettlement() {
				for (let item of this.customCostList) {
					if (!item.deductionsFor) {
						uni.$u.toast('收费项名称不能为空')
						return;
					} else if (!item.deductionsAmount) {
						uni.$u.toast('费用不能为空')
						return;
					} else if (!this.$u.test.number(item.deductionsAmount)) {
						uni.$u.toast('请输入正确金额');
						return;
					}
				}
				if (this.formData.settlementMethod == 1 && this.deduction <= 0) {
					uni.$u.toast('押金抵扣费用为0,请选择单独缴费')
					return;
				}
				if (this.supplementary < 0) {
					uni.$u.toast('请检查押金抵扣金额')
					return;
				}
				if (this.checkDeductionsAmount()) {
					this.submitBtnLoading = true
					orderApi.vehicleDamage({
						orderNo: this.formData.orderNo,
						alsoCarItems: this.customCostList,
						deductions: this.depositList,
						settlementMethod: this.formData.settlementMethod
					}).then(response => {
						uni.$emit('refreshOrder');
						uni.$u.toast(response.msg)
						uni.navigateBack({

						})
					})
				}

			},
			// 校验抵扣金额
			checkDeductionsAmount() {
				if (this.depositList.length > 0) {
					var total = 0;
					this.depositList.forEach(item => {
						total += Number(item.deductionsAmount);
					})
					if (total > Number(this.vehicleDamageTotal)) {
						uni.$u.toast('抵扣金额不能大于车损费用合计,请检查抵扣金额');
						return false
					} else {
						return true
					}
				} else {
					return true
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.addCost {
		margin: 32rpx 0;
		box-sizing: border-box;
		padding-left: 30rpx;
		width: 242rpx;
		height: 60rpx;
		background: #1673ff;
		border-radius: 30rpx;
	}

	.costItem {
		box-shadow: 0px 4rpx 16rpx 0rpx rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
		margin: 12rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>